<template>
    <ContentWrap>
        <CardTitle title="Search 使用" />
        <code class="code-block mt-20px" >
            &lt;Search v-model="searchValue" @search="handleSearch" /&gt;<br/>
            &lt;Search v-model="searchValue" placeholder="自定义占位符" :loading="loading" /&gt;<br/>
            &lt;Search v-model="searchValue" :showButton="false" @input="handleInput" /&gt;
        </code>
        <CardTitle title="Search 代码示例" />
        <pre class="code-block">
            <code>
&lt;script setup lang="ts"&gt;
import { ref } from 'vue'

const searchValue = ref('')
const loading = ref(false)

const handleSearch = (value: string) => {
    console.log('搜索:', value)
}

const handleInput = (value: string) => {
    console.log('输入:', value)
}

&lt;/script&gt;
            </code>
        </pre>
        <CardTitle title="Search 属性" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>属性</th>
                    <th>类型</th>
                    <th>默认值</th> 
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>modelValue</td> 
                    <td>String</td>
                    <td>-</td>
                    <td>搜索值</td>
                </tr>
                <tr>
                    <td>placeholder</td>
                    <td>String</td>
                    <td>请输入搜索内容</td>
                    <td>占位符文本</td>
                </tr>
                <tr>
                    <td>loading</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否显示加载状态</td>
                </tr>
                <tr>
                    <td>showButton</td>
                    <td>Boolean</td>
                    <td>true</td>
                    <td>是否显示搜索按钮</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="Search 事件" />
        <table class="properties-table mt-20px">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>参数</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>schema</td>
                    <td>Array</td>
                    <td>[]</td>
                    <td>表单配置</td>
                </tr>
                <tr>
                    <td>isCol</td>
                    <td>Boolean</td>
                    <td>false</td>
                    <td>是否需要栅格布局</td>
                </tr>
                <tr>
                    <td>labelWidth</td>
                    <td>String</td>
                    <td>auto</td>
                    <td>表单label宽度</td>
                </tr>
                <tr>
                    <td>layout</td>
                    <td>String</td>
                    <td>inline</td>
                    <td>操作按钮风格位置</td>
                    </tr>
                <tr>
                    <td>buttomPosition</td>
                    <td>String</td>
                    <td>center</td>
                    <td>底部按钮的对齐方式</td>
                </tr>
                <tr>
                    <td>showSearch</td>
                    <td>Boolean</td>
                    <td>true</td>
                    <td>是否显示搜索按钮</td>
                </tr>
            </tbody>
        </table>
        
        <CardTitle title="Search 示例" />
       <div class="mt-20px">
            <div class="demo-section">
                <h4>基础搜索</h4>
                <Search v-model="searchValue1" :schema="schema" @search="handleSearch1" />
                <p class="demo-result">搜索值: {{ searchValue1 }}</p>
                <p class="demo-result">最后搜索: {{ lastSearch1 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>加载状态</h4>
                <Search v-model="searchValue2"  :schema="schema" :loading="loading" @search="handleSearchWithLoading" />
                <p class="demo-result">搜索值: {{ searchValue2 }}</p>
                <p class="demo-result">加载状态: {{ loading ? '搜索中...' : '已完成' }}</p>
            </div>
            
            <div class="demo-section">
                <h4>不显示搜索按钮</h4>
                <Search v-model="searchValue3"  :schema="schema" :showButton="false" @input="handleInput3" />
                <p class="demo-result">搜索值: {{ searchValue3 }}</p>
                <p class="demo-result">实时输入: {{ realTimeInput }}</p>
            </div>
            
            <div class="demo-section">
                <h4>自定义占位符</h4>
                <Search v-model="searchValue4" :schema="schema"  placeholder="请输入商品名称、品牌或关键词" @search="handleSearch4" />
                <p class="demo-result">搜索值: {{ searchValue4 }}</p>
            </div>
            
            <div class="demo-section">
                <h4>搜索历史</h4>
                <Search v-model="searchValue5" :schema="schema" @search="handleSearchWithHistory" />
                <div class="search-history" v-if="searchHistory.length">
                    <p>搜索历史:</p>
                    <div class="history-tags">
                        <span 
                            v-for="(item, index) in searchHistory" 
                            :key="index"
                            class="history-tag"
                            @click="searchValue5 = item"
                        >
                            {{ item }}
                        </span>
                    </div>
                </div>
            </div>
       </div>
    </ContentWrap>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const searchValue1 = ref('')
const searchValue2 = ref('')
const searchValue3 = ref('')
const searchValue4 = ref('')
const searchValue5 = ref('')

const lastSearch1 = ref('')
const loading = ref(false)
const realTimeInput = ref('')
const searchHistory = ref<string[]>([])

const schema = ref([
    {
        field: 'search',
        label: '搜索',
        component: 'Input',
        componentProps: {
            placeholder: '请输入搜索内容',
        }
    }
])


const handleSearch1 = (value: string) => {
    lastSearch1.value = value
    console.log('基础搜索:', value)
}

const handleSearchWithLoading = async (value: string) => {
    loading.value = true
    console.log('开始搜索:', value)
    
    // 模拟搜索延迟
    setTimeout(() => {
        loading.value = false
        console.log('搜索完成:', value)
    }, 2000)
}

const handleInput3 = (value: string) => {
    realTimeInput.value = value
    console.log('实时输入:', value)
}

const handleSearch4 = (value: string) => {
    console.log('商品搜索:', value)
}

const handleSearchWithHistory = (value: string) => {
    if (value && !searchHistory.value.includes(value)) {
        searchHistory.value.unshift(value)
        if (searchHistory.value.length > 5) {
            searchHistory.value.pop()
        }
    }
    console.log('搜索历史:', value)
}
</script>

<style lang="scss" scoped>
.demo-section {
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background: #fafafa;
    
    h4 {
        margin: 0 0 15px 0;
        color: #333;
        font-size: 16px;
    }
    
    .demo-result {
        margin: 10px 0 0 0;
        color: #666;
        font-size: 14px;
        font-family: monospace;
    }
}

.search-history {
    margin-top: 15px;
    
    p {
        margin: 0 0 10px 0;
        color: #333;
        font-size: 14px;
        font-weight: 500;
    }
    
    .history-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        
        .history-tag {
            padding: 4px 8px;
            background: #e6f7ff;
            border: 1px solid #91d5ff;
            border-radius: 4px;
            color: #1890ff;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
            
            &:hover {
                background: #bae7ff;
                border-color: #40a9ff;
            }
        }
    }
}
</style> 